<template>
	<view class="details-page">
		<u-navbar title="AI创作" :autoBack="true" :placeholder="true">
			<view class="u-nav-slot" slot="right">
				<image @click="gonav" src="/static/home/share.png" style="width: 30rpx; height: 30rpx;"
					mode="heightFix"></image>
			</view>
		</u-navbar>
		<view class="content">
			<view class="image-box image-box0" v-if="!imageLoad">
				<view>{{ progress }} %</view>
				<view class="status">正在生成中...</view>
				<view class="progress">
					<u-line-progress :percentage="progress" :showText="false"></u-line-progress>
				</view>
			</view>

			<view class="image-box" v-if="imageList.length == 1">
				<image @click="goopen(0)" :src="imageList[0].url" mode="widthFix"></image>
			</view>
			<view class="image-box image-box4" v-if="imageList.length == 4">
				<image @click="goopen(index)" v-for="(item, index) in imageList" :key="index" :src="item.url"
					mode="widthFix">
				</image>
			</view>
		</view>
		<view class="details">
			<view class="title">
				画面描述
			</view>
			<view class="cont">
				{{ info.value }}
			</view>
		</view>
		<view class="details">
			<view class="title">
				创作信息
			</view>
			<view class="cont">
				<view class="cont-item" v-for="(item,index) in create_info" :key="index">
					<view>
						{{index}}
					</view>
					<view class="text">
						{{item}}
					</view>
				</view>
			</view>
		</view>
		<view class="details">
			<view class="title">
				精绘
			</view>
			<view class="cont">
				<view class="cont-item" v-for="(item,index) in parameter_info" :key="index">
					<view>
						{{index}}
					</view>
					<view class="text">
						{{item}}
					</view>
				</view>
			</view>
			<u-overlay :show="show" @click="show = false">
				<view class="image-box2">
					<image :src="Image" mode="widthFix"></image>
				</view>
				<view class="imgbtn" @click="gocopy">复制链接</view>
			</u-overlay>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				info: {
					value: ''
				},
				id: 0,
				progress: 0,
				imageList: [

				],
				create_info: {},
				parameter_info: {},
				imageLoad: false,
				Image: '',
				params: {
					type: '',
					theme: '',
				}
			}
		},
		onLoad(options) {
			this.info = uni.getStorageSync("imageInfo")
			this.params = options
			this.getDataId()
			this.setProgress()
		},
		methods: {
			setProgress() {
				this.timer = setInterval(() => {
					this.progress += 3;
					if (this.progress >= 99) {
						this.progress = 99;
						clearInterval(this.timer);
						this.timer = null;
					}
				}, 500)
			},
			checkImage(src) {
				const image = new Image();
				image.src = src
				let that = this;
				image.onload = function() {
					that.progress = 100
					if (that.timer) {
						clearInterval(this.timer);
						this.timer = null;
					}
					setTimeout(() => {
						that.imageLoad = true;
					}, 100)
				};
			},
			getDataId() {
				const info = this.info
				const params = this.params
				const that = this
				const token = uni.getStorageSync("token")
				uni.request({
					method: 'POST',
					header: {
						token,
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					url: '/main/setsession.php',
					data: {
						type: 2,
						token,
						n: info.num,
						desc: info.value,
						theme: params.theme,
						style: params.type,
					}
				}).then(res => {
					if (res.data.code == 1) {
						that.getImage(res.data.data.id)
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				})
			},
			getImage(id) {
				const that = this
				uni.request({
					method: 'POST',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					url: `/main/getpicture.php`,
					data: {
						id
					}
				}).then(res => {
					if (res.data.code == 1) {
						that.create_info = res.data.data.create_info
						that.parameter_info = res.data.data.parameter_info
						that.imageList = res.data.data.gpt_json.data
						const obj = this.imageList.at(-1)
						this.checkImage(obj.url)
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				})
			},
			goopen(index) {
				this.Image = this.imageList[index].url
				this.show = true
			},
			gocopy() {
				let app = this
				app.show = false
				uni.setClipboardData({
					data: this.Image,
					success() {
						uni.showToast({
							title: '复制成功,请在浏览器打开',
							icon: 'success'
						});
					},
					fail() {
						uni.showToast({
							title: '复制失败',
							icon: 'none'
						});
					}
				});
			},
			gonav() {
				uni.navigateTo({
					url: '/pages/my/works/index'
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #ffffff;
	}
</style>
<style scoped lang="scss">
	.details-page {
		padding: 30rpx 30rpx 100rpx 30rpx;

		.details {
			margin-top: 30rpx;

			.title {
				font-size: 32rpx;
				font-weight: 700;
			}

			.image-box2 {
				margin-top: 400rpx;
				text-align: center;
			}

			.imgbtn {
				width: 200rpx;
				background-color: #0055ff;
				color: #fff;
				text-align: center;
				font-size: 28rpx;
				padding: 10rpx 0;
				margin: 0 auto;
				margin-top: 30rpx;
				border-radius: 10rpx;
			}

			.cont {
				font-size: 30rpx;
				margin-top: 20rpx;
				border: 2rpx solid #7f7f7f;
				padding: 20rpx 30rpx;
				border-radius: 30rpx;
				color: #666;

				.cont-item {
					display: flex;
					justify-content: space-between;
					padding: 10rpx 0;

					.text {
						font-size: 32rpx;
						color: #000;
					}
				}
			}
		}
	}

	.content {
		position: relative;
		height: calc(100vw - 60rpx);
		width: calc(100vw - 60rpx);
		margin-top: 20rpx;
	}

	.image-box {
		padding: 10rpx;
		height: calc(100vw - 60rpx);
		margin: 0 auto;
		background: #f5f6fa;
		border-radius: 20rpx;

		.img-text {
			text-align: center;
			margin-top: 20rpx;
			color: #666;
			font-size: 32rpx;
		}

		image {
			width: 100%;
			height: 100%;
			border-radius: 20rpx;
		}

	}

	.image-box0 {
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		font-size: 28rpx;
		font-weight: bold;
		color: #000;

		.status {
			font-size: 26rpx;
			font-weight: 500;
			margin: 20rpx 0;
		}

		.progress {
			width: 250rpx;
		}
	}

	.image-box4 {
		display: flex;
		flex-wrap: wrap;
		gap: 1%;
		justify-content: space-around;

		image {
			width: 48%;
			height: 48%;
		}
	}
</style>